<template>
	<el-config-provider :locale="appStore.locale">
		<view class="dx-table">
			<!-- header -->
			<slot name="tableHeader">
				<view class="dx-header" v-if="header !== void 0">
					<view class="dx-header-tips pb-10px" v-if="!!header.tips">
						<view>{{ header.tips }}</view>
					</view>
					<view class="dx-tabs flex">
						<view
							class="dx-tabs-item"
							:class="{ active: tabIndex == index }"
							v-for="(item, index) in header.params"
							:key="index"
							@click="tabsChange(index)"
						>
							{{ item[header.labelField || 'label'] }}
						</view>
					</view>
				</view>
			</slot>
			<!-- search -->
			<view class="pl-15px pr-15px">
				<!-- 顶部搜索 -->
				<slot name="tableSearch" :isShowSearch="isShowSearch" :searchCol="searchCol" :searchColumns="searchColumns">
					<dx-search @search="search" @reset="reset" :columns="searchColumns" :searchCol="searchCol" v-show="isShowSearch"></dx-search>
				</slot>
				<!-- crud 按钮组 -->
				<view class="flex items-center justify-between flex-wrap">
					<view class="pt-5px">
						<slot name="tableButtons" :btnEvent="btnEvent">
							<template v-for="val in tableHeaderButtons" :key="val">
								<el-button
									v-if="typeof val === 'string'"
									v-permission="btnPermission(val)"
									class="mt-10px"
									:type="tableHeaderBtn[val].type"
									:color="val === 'refresh' ? themeStore.menuBgColor : tableHeaderBtn[val].color"
									:loading="refreshLoading && val === 'refresh'"
									:disabled="!isChecked && ['edit', 'del', 'multi'].includes(val)"
									@click="btnEvent(val)"
								>
									<dx-icon
										:name="val !== 'toggle' ? tableHeaderBtn[val].icon : isToggle ? 'expand-up' : 'expand-down'"
										size="16"
										color="#ffffff"
									></dx-icon>
									<span class="ml-2px" v-if="tableHeaderBtn[val].label">{{
										val !== 'toggle' ? tableHeaderBtn[val].label : isToggle ? '折叠所有' : '展开所有'
									}}</span>
								</el-button>
								<dx-v-node v-else-if="typeof val === 'function'" :vNode="val"></dx-v-node>
							</template>
						</slot>
					</view>
					<view class="pt-15px flex-1 flex items-center justify-end">
						<slot name="tableTools">
							<template v-for="btn in tools" :key="btn">
								<el-button v-if="btn === 'import'" circle @click="toolsEvent(btn)">
									<dx-icon size="18" color="#909399" name="upload"></dx-icon>
								</el-button>
								<el-button v-else-if="btn === 'export'" circle @click="toolsEvent(btn)">
									<dx-icon size="18" color="#909399" name="download"></dx-icon>
								</el-button>
								<el-button v-else-if="btn === 'print'" circle @click="toolsEvent(btn)">
									<dx-icon size="18" color="#909399" name="printer"></dx-icon>
								</el-button>
								<template v-else-if="btn === 'rows'">
									<el-popover placement="bottom" popper-class="dx-tools-popper" teleported trigger="hover" width="auto" :offset="15">
										<el-checkbox-group v-model="configColumns" @change="configColumnsChange">
											<template v-for="item in tableParams.columns" :key="item.field">
												<view v-if="item.visible !== false && !!item.label && !!item.field" class="pl-5px pr-5px">
													<el-checkbox :value="item.field" :label="item.label"></el-checkbox>
												</view>
											</template>
										</el-checkbox-group>
										<template #reference>
											<el-button circle>
												<dx-icon size="18" color="#909399" name="setting-config"></dx-icon>
											</el-button>
										</template>
									</el-popover>
								</template>
								<el-button v-else-if="btn === 'search'" circle @click="toolsEvent(btn)">
									<dx-icon size="18" color="#909399" name="search"></dx-icon>
								</el-button>
								<dx-v-node v-else-if="typeof btn === 'function'" :vNode="btn"></dx-v-node>
							</template>
						</slot>
					</view>
				</view>
			</view>
			<!-- table -->
			<slot name="tableComtent">
				<view class="dx-table p-15px">
					<vxe-table
						ref="xTable"
						id="dxToolbar"
						:border="tableParams.border === void 0 || tableParams.border"
						:stripe="!!tableParams.stripe"
						:round="!!tableParams.round"
						:auto-resize="tableParams.autoResize === void 0 || tableParams.autoResize"
						:keep-source="!!tableParams.keepSource"
						:size="tableParams.size || 'medium'"
						:align="tableParams.align || 'center'"
						:height="tableParams.height"
						:max-height="tableParams.maxHeight"
						:header-align="tableParams.headerAlign || 'center'"
						:show-header="tableParams.showHeader === void 0 || tableParams.showHeader"
						:show-footer="!!tableParams.showFooter"
						:show-overflow="tableParams.showOverflow"
						:column-config="tableParams.columnConfig"
						:row-config="tableParams.rowConfig"
						:resize-config="tableParams.resizeConfig"
						:seq-config="tableParams.seqConfig"
						:resizable-config="tableParams.resizableConfig"
						:custom-config="tableParams.customConfig"
						:tree-config="tableParams.treeConfig"
						:checkbox-config="tableParams.checkboxConfig"
						:sort-config="tableParams.sortConfig"
						:filter-config="tableParams.filterConfig"
						:export-config="tableParams.exportConfig"
						:print-config="tableParams.printConfig"
						:radio-config="tableParams.radioConfig"
						:tooltip-config="tableParams.tooltipConfig"
						:expand-config="tableParams.expandConfig"
						:menu-config="tableParams.menuConfig"
						:keyboard-config="tableParams.keyboardConfig"
						:edit-config="tableParams.editConfig"
						:empty-text="tableParams.emptyText"
						:loading-config="tableParams.loadingConfig"
						:scroll-x="tableParams.scrollX"
						:scroll-y="tableParams.scrollY"
						:params="tableParams.params"
						:data="tableData"
						:loading="isLoading"
						@resizable-change="resizableChangeEvent"
						@checkbox-all="selectAllChangeEvent"
						@checkbox-change="selectChangeEvent"
					>
						<template v-for="item in tableParams.columns" :key="item.field || item.type">
							<vxe-column
								v-permission="item.permission"
								v-if="['seq', 'checkbox', 'radio', 'expand', 'html'].includes(item.type)"
								:type="item.type"
								:field="item.field"
								:width="item.width"
								:min-width="item.minWidth"
								:align="item.align"
								:title="item.label"
								:fixed="item.fixed"
								:visible="item.visible === void 0 || item.visible"
								:sortable="item.sortable"
								:resizable="item.resizable"
								:header-align="item.headerAlign"
								:footer-align="item.footerAlign"
								:show-overflown="item.showOverflow"
								:show-header-overflow="item.showHeaderOverflow"
								:show-footer-overflow="item.showFooterOverflow"
								:class-name="item.className"
								:tree-node="!!item.treeNode"
							>
							</vxe-column>
							<vxe-column
								v-permission="item.permission"
								v-else-if="item.formatter"
								:field="item.field"
								:width="item.width || 'auto'"
								:min-width="item.minWidth"
								:align="item.align"
								:title="item.label"
								:fixed="item.fixed"
								:visible="item.visible === void 0 || item.visible"
								:sortable="item.sortable"
								:resizable="item.resizable"
								:header-align="item.headerAlign"
								:footer-align="item.footerAlign"
								:show-overflown="item.showOverflow"
								:show-header-overflow="item.showHeaderOverflow"
								:show-footer-overflow="item.showFooterOverflow"
								:class-name="item.className"
								:tree-node="!!item.treeNode"
								:formatter="item.formatter"
							></vxe-column>
							<vxe-column
								v-permission="item.permission"
								v-else
								:field="item.field"
								:width="item.width || 'auto'"
								:min-width="item.minWidth"
								:align="item.align"
								:title="item.label"
								:fixed="item.fixed"
								:visible="item.visible === void 0 || item.visible"
								:sortable="item.sortable"
								:resizable="item.resizable"
								:header-align="item.headerAlign"
								:footer-align="item.footerAlign"
								:show-overflown="item.showOverflow"
								:show-header-overflow="item.showHeaderOverflow"
								:show-footer-overflow="item.showFooterOverflow"
								:class-name="item.className"
								:tree-node="!!item.treeNode"
							>
								<template #default="{ row }">
									<slot :name="`column-${item.field}`" :row="row">
										<div v-if="item.type === 'operate'">
											<template v-for="btn in item.buttons" :key="btn">
												<el-button
													v-if="btn === 'edit'"
													v-permission="btnPermission('edit')"
													size="small"
													type="primary"
													@click="btnEvent('edit', row)"
												>
													<dx-icon size="14" color="#ffffff" name="edit"></dx-icon>
												</el-button>
												<el-button
													v-else-if="btn === 'del'"
													v-permission="btnPermission('del')"
													size="small"
													type="danger"
													@click="btnEvent('del', row)"
												>
													<dx-icon size="14" color="#ffffff" name="delete"></dx-icon>
												</el-button>
												<dx-v-node v-else-if="typeof btn === 'function'" :vNode="btn" :param="row"></dx-v-node>
											</template>
										</div>
										<div v-else-if="item.component?.name === 'el-switch'">
											<el-switch
												v-model="row[item.field]"
												:loading="!!row.switchLoading?.[item.field]"
												:before-change="multiTableRows(row, item.field)"
											/>
										</div>
										<div v-else-if="typeof item.render === 'string'" style="width: 100%; display: block">
											<dx-icon v-if="item.render === 'dx-icon'" :name="row[item.field]"></dx-icon>
											<dx-image v-else-if="item.render === 'dx-image'" :list="row[item.field]"></dx-image>
										</div>
										<dx-v-node v-else-if="typeof item.render === 'function'" :vNode="item.render" :param="row"></dx-v-node>
										<text v-else style="white-space: nowrap" selectable>{{ fieldText(row, item.field) }}</text>
									</slot>
								</template>
							</vxe-column>
						</template>
					</vxe-table>
				</view>
			</slot>
			<!-- paginate -->
			<slot name="tablePagination" :pagination="pagination">
				<view class="flex justify-end mt-10px mb-30px pl-10px pr-10px" v-if="isPagination">
					<el-pagination
						v-model:current-page="pagination.page"
						v-model:page-size="pagination.size"
						:page-sizes="[10, 15, 30, 50, 100, 150, 200]"
						:disabled="false"
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</view>
			</slot>
			<!-- 编辑弹窗 -->
			<slot name="tableLayerForm" :modalForm="modalForm">
				<dx-layer
					v-model="showLayerForm"
					:title="modalForm.title"
					:mask="true"
					:maskClosable="maskClosable"
					:showZoom="showZoom"
					:loading="modelLoading"
					:isSync="true"
					:height="modelHeight || 680"
					className="dx-layer-form"
					@close="modalClose"
					@cancel="modalClose"
					@confirm="submitForm"
					ref="dxLayerRef"
				>
					<view class="pt-10px pr-10px">
						<el-form ref="ruleFormRef" :model="layerForm" :rules="layerRules" :label-width="tableParams.labelWidth || '100px'">
							<template v-for="item in modalForm.fields" :key="item.field">
								<el-form-item :label="item.label" :prop="item.field" v-if="showFormItem(item)">
									<slot :name="`form-${item.field}`" :row="layerForm">
										<dx-layer-form-item :column="item" :formParam="layerForm"></dx-layer-form-item>
									</slot>
								</el-form-item>
							</template>
						</el-form>
					</view>
				</dx-layer>
			</slot>
		</view>
	</el-config-provider>
</template>

<script setup lang="ts">
import { ref, reactive, inject, computed, watch, provide } from 'vue';
import { useTable } from '../../libs/useTable';
import { useForm } from '../../libs/useForm';
import { VxeTableInstance, VxeTableEvents } from 'vxe-table';
import { useDictsStore } from '@/uni_modules/dx-admin/stores/dicts';
import { useThemeStore } from '@/uni_modules/dx-admin/stores/theme';
import { useAppStore } from '@/uni_modules/dx-admin/stores/app';
const appStore = useAppStore();
interface ModalField {
	label: string;
	field: string;
	rules?: [];
	value?: any;
	component?: { [key: string]: any };
	operator?: any;
	search?: any;
	formHide?: any;
	watch?: any;
	edit?: any;
}
interface ModalForm {
	title: string;
	urls: { [key: string]: any };
	type: string;
	fields: ModalField[];
	row?: { [key: string]: any };
	funcName?: string;
}
const props = withDefaults(
	defineProps<{
		header?: {
			tips: string;
			searchField: string;
			searchOp?: string;
			labelField: string;
			valueField: string;
			value?: any;
			params: any;
		};
		buttons?: string[];
		tools?: any;
		tableParams: any;
		searchCol?: { [key: string]: any };
		isPagination?: boolean;
		maskClosable?: boolean;
		showZoom?: boolean;
		modelHeight?: number;
	}>(),
	{
		buttons: () => ['refresh', 'add', 'edit', 'del'],
		tableParams: {
			columnConfig: {},
			rowConfig: {},
			resizableConfig: {},
			customConfig: {},
			treeConfig: {},
			checkboxConfig: {},
			urls: {},
			columns: [],
		},
		searchCol: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }),
		tools: () => ['rows', 'print', 'search'],
		isPagination: true,
	}
);
const $emit = defineEmits(['changeCheckBox'])
const tableHeaderButtons = computed(() => {
	if (props.buttons.includes('all')) {
		return ['refresh', 'add', 'edit', 'del', 'multi', 'recycle', 'toggle'];
	}
	return props.buttons;
});
const fieldText = computed(() => (row: any, field: string) => {
	if (field.includes('.')) {
		const fieldArr = field.split('.');
		let value = row;
		fieldArr.forEach((item: any) => {
			if (typeof value === 'object') {
				value = value[item];
			} else {
				value = '';
			}
		});
		return value;
	} else {
		return row[field];
	}
});
const funcName = props.tableParams.funcName || 'dx-func-admin';
const themeStore = useThemeStore();
const tableHeaderBtn: any = ref({
	refresh: {
		icon: 'refresh',
		type: 'info',
	},
	add: {
		icon: 'plus',
		label: '添加',
		type: 'primary',
	},
	edit: {
		icon: 'edit',
		label: '编辑',
		type: 'primary',
	},
	del: {
		icon: 'delete',
		label: '删除',
		type: 'danger',
	},
	multi: {
		icon: 'more',
		color: '#444444',
		label: '更多',
		type: 'info',
	},
	recycle: {
		icon: 'recycle-bin',
		label: '回收站',
		type: 'danger',
	},
	toggle: {
		icon: 'recycle-bin',
		label: '展开折叠',
		type: 'warning',
	},
});
const isShowSearch = ref(false);
const tabIndex = ref(0);
const showLayerForm = ref(false);
const refreshLoading = ref(false);
const isChecked = ref(false);
const isToggle = ref(false);
const configColumns = ref<any[]>([]);
const defaultConfigColumns: any = [];
const dxLayerFormShowId = Math.random().toString(36).substring(2) + Date.now();
// 注入弹窗表单的id
provide('dxLayerFormShowId', dxLayerFormShowId);
// 默认是否展开
isToggle.value = !!props.tableParams.treeConfig?.expandAll;
const modalForm: ModalForm = reactive({
	title: '添加',
	urls: {
		add: props.tableParams.urls.add,
		edit: props.tableParams.urls.edit,
	},
	type: 'add',
	fields: [],
	funcName,
	row: {},
});
const searchColumns = ref<ModalField[]>([]);
const xTable = ref<VxeTableInstance>();
const ruleFormRef = ref();
const dxLayerRef = ref();
// 按钮权限
const btnPermission = computed(() => (btn: any) => {
	if (['refresh', 'toggle'].includes(btn)) return true;
	return funcName + '/' + props.tableParams.urls[btn];
});
//表格获取之前
const onBeforeIndex: any = inject('onBeforeIndex', null);
// 获取表格之后
const onAfterIndex: any = inject('onAfterIndex', null);
//删除之前
const onBeforeDelete: any = inject('onBeforeDelete', null);
// 删除之后
const onAfterDelete: any = inject('onAfterDelete', null);
// 按钮事件拦截
const onBeforeButton: any = inject('onBeforeButton', null);
//处理表格
const {
	getTableList,
	tableData,
	pagination,
	isLoading,
	deleteTableRows,
	reset,
	search,
	handleCurrentChange,
	handleSizeChange,
	multiTableRows,
	totalParam,
	tabsParam,
} = useTable(props.tableParams.urls, funcName, props.isPagination, props.tableParams.order, props.tableParams.sort, {
	onBeforeIndex,
	onAfterIndex,
	onBeforeDelete,
	onAfterDelete,
});
const { layerForm, layerRules, showFormItem, submitForm, modelLoading, setFormField, setFormItem, renderFormValue } = useForm(
	() => {
		showLayerForm.value = false;
		dxLayerRef.value?.close();
		getTableList();
	},
	modalForm,
	ruleFormRef
);
// 设置默认条数
if (props.tableParams.pagination && props.tableParams.pagination.size) {
	pagination.value.size = props.tableParams.pagination.size;
}
// 默认的tabs搜索参数
if (props.header?.value !== void 0) {
	totalParam.value[props.header?.searchField || 'label'] = props.header?.value;
}
// 处理表单和搜索
props.tableParams.columns.map((item: any) => {
	// 显示配置
	if (item.visible !== false && !!item.label && !!item.field) {
		configColumns.value.push(item.field);
		defaultConfigColumns.push(item.field);
	}
	// 表单字段
	if (item.type === void 0 && item.form !== false) {
		modalForm.fields.push({
			label: item.label,
			field: item.field,
			rules: item.rules,
			value: item.value,
			component: item.component,
			formHide: item.formHide,
			watch: item.watch,
			edit: item.edit,
		});
	}
	// 搜索字段
	if (item.operator !== false) {
		const itemSearch = item.search || {};
		if (itemSearch.component === void 0) {
			itemSearch.component = item.component || {};
		}
		searchColumns.value.push({
			label: item.label,
			field: item.field,
			value: item.value,
			operator: item.operator,
			search: itemSearch,
		});
	}
});
setFormField(modalForm.fields);
watch(
	() => showLayerForm.value,
	(val) => {
		if (val) {
			uni.$emit(dxLayerFormShowId);
			renderFormValue();
		}
	}
);
/**
 * @description: 列显示隐藏
 */
const configColumnsChange = function (val: any) {
	// 两个数组取差集
	const diff = defaultConfigColumns.filter((item: string) => !val.includes(item));
	// diff 需要隐藏
	// val 需要显示
	diff.map((item: string) => {
		xTable.value?.hideColumn(item);
	});
	val.map((item: string) => {
		xTable.value?.showColumn(item);
	});
};
const selectAllChangeEvent: VxeTableEvents.CheckboxAll = ({ checked }) => {
	const records = getCheckboxRecords();
	isChecked.value = !!records?.length;
	$emit('changeCheckBox',records)
	// console.log(checked ? '所有勾选事件' : '所有取消事件', records);
};

const selectChangeEvent: VxeTableEvents.CheckboxChange = () => {
	const records = getCheckboxRecords();
	isChecked.value = !!records?.length;
	$emit('changeCheckBox',records)
};
// 展开折叠
function showSearch() {
	isShowSearch.value = !isShowSearch.value;
}
// 获取选中的数据
function getCheckboxRecords() {
	const $table = xTable.value;
	const records = $table?.getCheckboxRecords();
	return records;
}
/**
 * 按钮事件
 * @param btn
 */
const btnEvent = function (btn: string, row?: any) {
	console.log(btn);
	// 按钮事件拦截
	const isBeforeBtn = typeof onBeforeButton === 'function';
	switch (btn) {
		case 'refresh':
			if (isBeforeBtn && onBeforeButton(btn) === false) return;
			refreshLoading.value = true;
			isChecked.value = false;
			getTableList().finally(() => {
				refreshLoading.value = false;
			});
			break;
		case 'add':
			modalForm.title = '添加';
			modalForm.type = 'add';
			modalForm.row = !!row ? row : {};
			if (isBeforeBtn && onBeforeButton(btn) === false) return;
			showLayerForm.value = true;
			break;
		case 'edit':
			modalForm.title = '编辑';
			modalForm.type = 'edit';
			if (!row) {
				const records = getCheckboxRecords();
				if (records?.length) {
					row = records[0];
				}
			}
			modalForm.row = row;
			if (isBeforeBtn && onBeforeButton(btn, row) === false) return;
			showLayerForm.value = true;
			break;
		case 'del':
			if (isBeforeBtn && onBeforeButton(btn) === false) return;
			ElMessageBox.confirm('确定删除选中行吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'error',
			})
				.then(() => {
					let ids;
					if (!row) {
						const records = getCheckboxRecords();
						ids = records?.map((v) => v._id);
					} else {
						ids = row._id;
					}
					deleteTableRows(ids);
				})
				.catch(() => {});
			break;
		case 'multi':
			if (isBeforeBtn && onBeforeButton(btn) === false) return;
			break;
		case 'recycle':
			break;
		case 'toggle':
			if (isToggle.value) {
				xTable.value?.clearTreeExpand();
			} else {
				xTable.value?.setAllTreeExpand(true);
			}
			isToggle.value = !isToggle.value;
			break;
	}
};
const toolsEvent = function (btn: string) {
	console.log(btn);
	const $table = xTable.value;
	switch (btn) {
		case 'import':
			break;
		case 'export':
			break;
		case 'print':
			$table?.print({
				sheetName: '打印',
				style: '',
				columns: props.tableParams.columns
					.filter((v: any) => v.visible !== false && configColumns.value.includes(v.field))
					.map((v: any) => ({ field: v.field })),
				beforePrintMethod: ({ content }) => {
					// 拦截打印之前，返回自定义的 html 内容
					return content;
				},
			});
			break;
		case 'rows':
			break;
		case 'search':
			showSearch();
			break;
	}
};
const dictStore = useDictsStore();
// async function test() {
// 	console.log(await dictStore.getDict('song', true));
// 	onBeforeIndex(7);
// }

function tabsChange(index: number) {
	tabIndex.value = index;
	pagination.value.page = 1;
	let op = props.header?.searchOp;
	if (op === void 0) {
		op = 'eq';
	}
	const value = props.header?.params[index][props.header?.valueField || 'value'];
	if (value === null || value === void 0 || value === '') {
		tabsParam.value = {};
	} else {
		tabsParam.value = {
			[props.header?.searchField || 'label']: {
				op,
				value,
			},
		};
	}
	search({});
}

function modalClose() {}

const resizableChangeEvent: VxeTableEvents.ResizableChange = () => {
	const $table = xTable.value;
	const columns = $table?.getColumns();
	const customData = columns?.map((column) => {
		return {
			width: column.renderWidth,
		};
	});
};

function clearSelectCheckBox(){
	xTable.value?.clearCheckboxRow();
}

defineExpose({
	element: xTable,
	btnEvent,
	toolsEvent,
	getTableList,
	showSearch,
	getCheckboxRecords,
	search,
	reset,
	setFormItem,
	clearSelectCheckBox
});
</script>

<style lang="scss" scoped>
.dx-header {
	font-size: 14px;
	background: #e1e6ec;
	border-color: #e1e6ec;
	padding: 15px 15px 0;
	.dx-header-tips {
		color: #5c6977;
	}
	.dx-tabs {
		white-space: nowrap;
		overflow: auto hidden;
		.dx-tabs-item {
			background-color: #ccd3d9;
			color: #6c7884;
			transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
			padding: 8px 15px;
			cursor: pointer;
			border-bottom: 1px solid transparent;
			margin-right: 8px;
			border-radius: 3px 3px 0 0;

			&.active {
				border-top-right-radius: 3px;
				border-top-left-radius: 3px;
				background-color: #ffffff;
			}
		}
	}
}
.dx-table {
	.el-button + .el-button {
		margin-left: 8px;
	}
	.el-button--small {
		padding: 5px 8px;
	}
	&::v-deep {
		.vxe-table {
			.vxe-table--main-wrapper {
				.vxe-table--body-wrapper {
					min-height: 110px;
				}
			}
			.vxe-loading {
				min-height: 210px;
				max-height: 800px;
				.vxe-loading--chunk {
					color: var(--el-color-primary);
				}
			}
		}
	}
}
::v-deep {
	.btn-prev,
	.btn-next {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: var(--el-pagination-font-size);
		min-width: var(--el-pagination-button-width);
		height: var(--el-pagination-button-height);
		line-height: var(--el-pagination-button-height);
		color: var(--el-pagination-button-color);
		background: var(--el-pagination-bg-color);
		padding: 0 4px;
		border: none;
		border-radius: var(--el-pagination-border-radius);
		cursor: pointer;
		text-align: center;
		box-sizing: border-box;
	}
	.el-pagination {
		white-space: nowrap;
		overflow: auto hidden;
	}
}
</style>
